<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    </script>
    <script src="js/lib/vue.min.js"></script>

    </script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-size: 15px;
        font-family: 微软雅黑;
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    .all {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .t {
        width: 20%;
        height: 100px;
        background: #c2c2c2;
        border: 1px solid #333333;
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #f9f9f9;
    }

    .table {
        width: 100%;
        max-width: 100%;
        margin: 10px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px;
        margin: 0px 10px;
        line-height: 1.42857143;
        vertical-align: top;
    }

    .center tr td {
        text-align: center;
        border-radius: 4px;
    }

    .table > tbody > tr:hover {
        background: #c2c2c2;
    }

    .table > tbody > tr > td:hover {
        background: #e2e2e2;
    }

    .div-2 {

        padding: 5px 60px 5px 20px;
        align-items: center;
        text-align: center;
        background: #79C48C;
        border-radius: 50px;
        position: relative;
    }

    .circle {
        position: absolute;
        top: 4px;
        left: 60px;
        height: 20px;
        width: 20px;
        border-radius: 50px;
        background: white;
        z-index: 222;
        transition: 0.2s;
        box-shadow: 0 0 8px #c2c2c2;
    }

    .onoff {
        padding-bottom: 5px;
        font-size: 15px;
        font-family: 微软雅黑;
        color: white;;
    }

    .all-o {
        width: 100%;
        display: block;
        align-items: center;
        height: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .all-k {
        width: 100%;
        height: 100%;
        position: absolute;
        background: gray;
        opacity: 1;
        top: -20px;
        left: 0px;
        justify-content: center;
        align-items: center;
        display: none;
        z-index: 999;
    }

    .all-a {
        display: flex;
        width: 460px;
        height: 300px;
        background: white;
        flex-direction: column;
        align-items: center;
    }

    .all-b {
        width: 90%;
        height: 30px;
        line-height: 28px;
        vertical-align: middle;
        border: 1px solid #e2e2e2;
        margin: 20px 0px 3px 0px;
        text-align: left;
        border-radius: 4px;
    }

    .all-b > span {
        margin-left: 20px;
    }

    .input {
        background: white;
        width: 150px;
        text-decoration: none;
        border: none;
        outline: none;
        height: 20px;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
        /*border: 1px solid #CCC!important;*/
    }

    h2 {
        margin-top: 10px;
    }

    .all-b:hover {
        background: #e2e2e2;
    }

    .all-c {
        border: 1px solid #c2c2c2;
        border-radius: 4px;
        background: #ff1d25;
        width: 40px;
        padding: 3px 20px;
        color: white;
    }

    .all-d {
        border: 1px solid #c2c2c2;
        border-radius: 4px;
        background: #eeeeee;
        width: 40px;
        padding: 3px 20px;
        margin-left: 20px;
        color: #333333;
    }

    .all-c:hover, .all-d:hover {
        opacity: 0.8;
    }

    .all-c:active {
        background: #333333;
    }

    .all-d:active {
        background: #79C48C;
    }

    .all-j {
        padding: 5px 20px;
        margin-top: 3px;
        margin-left: 40px;
        background: #ff1d25;
        border-radius: 4px;
        cursor: pointer;
    }

    .all-j:hover {
        opacity: 0.8;
        box-shadow: 0 0 10px red;
        color: white;
    }

    .all-j:active {
        background: #79C48C;
    }

    .div-3 {
        border-radius: 4px;
        padding-bottom: 7px;
        padding-right: 20px;
        background: #79C48C;
        padding-left: 20px;
    }

    .all-p {
        background: #c2c2c2;
    }

    .all-kai {
        background: #c2c2c2;
        padding: 5px 10px;
        border-radius: 5px;
        margin-left: 5px;
        cursor: pointer;
    }

    .all-kai:hover {
        opacity: 0.9;
        box-shadow: 0 0 10px #c2c2c2;
    }

    .all-kai:active {
        opacity: 0.9;
        background: #1daaf5;
        box-shadow: 0 0 10px #c2c2c2;
    }
</style>
<body>
<div class="all">
    <div class="all-k">
        <div class="all-a">
            <h2 style="font-size: 23px">设置若干批次验证码的配置</h2>
            <div class="all-b">
                <span style="margin-left: 80px">配置开关</span>
                <b style="margin-left: 60px" id="on">
                     <span class="div-2 div-3 on" id="1">
                             开
                         </span>
                    <span class="div-2 div-3"
                          style="margin-left: 20px;background: #eeeeee" id="0">
                             关
                         </span>
                </b>
            </div>
            <div class="all-b">
                <span style="margin-left: 80px">返利条件</span>
                <span style="margin-left: 60px">
                <input class="input" type="text" placeholder="请输入返利条件" size="15px" id="limitAmount">
              </span>
            </div>
            <div class="all-b">
                <span style="margin-left: 110px">返利</span>
                <span style="margin-left: 60px">
                <input class="input" type="text" placeholder="请输入返利" size="15px" id="rebate">
              </span>
            </div>

            <div style="width: 50%;border: 0;margin-top: 40px">
                <span class="all-c" onclick="submitM()">确&nbsp;定</span>
                <span class="all-d">取&nbsp;消</span>
            </div>
        </div>
    </div>

    <div class="all-o">
        <span class="all-j">添加一条自动返利配置</span> <span style="padding: 5px 20px;margin-left: 30px">贴牌返利功能开关<span
            class="all-kai" onclick="kaiqi(this)">点击开启</span></span>
    </div>
    <table class="table table-striped center" id="app">
        <tr>
            <td>
                onOff
            </td>
            <td>返利条件</td>
            <td>贴牌号</td>
            <td>返利金额</td>
        </tr>
        <tbody v-for="value in values">
        <tr>
            <td v-if="value.onOff == 1"> <!--开关-->
                <span class="div-2" onclick="changeOnoff(this)">
                           <i style="display: none">{{value.id}}</i>
                          <span class="onoff">
                             开
                         </span>
                        <span class="circle">
                        </span>
                </span></td>
            <td v-else-if="value.onOff == 0"> <!--开关-->
                <span class="div-2 open" onclick="changeOnoff(this)"
                      style="background:#393D49;padding-left: 60px;padding-right: 20px">
                      <i style="display: none">{{value.id}}</i>
                          <span class="onoff">
                             关
                         </span>
                        <span class="circle" style="background: #79C48C;left: 17px">
                        </span>
                </span></td>
            <td>{{value.limitAmount}}</td>
            <td>{{value.brandId}}</td>
            <td>{{value.rebate}}</td>
        </tr>
        </tbody>

    </table>
</div>
</body>
<script>


    var storage = window.sessionStorage;
    storage.setItem("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJKdUhlaSIsImV4cCI6MTUxMzM3MzAyMCwidXNlcklkIjo4MzM1NjY4MjksImJyYW5kSWQiOjI1LCJwaG9uZSI6IjE4ODc5NzkxMjcxIn0.UNl-3wpIV5EPHKJzjhTGASk9e_qrnIakFmJjvU7U5I1TAc_r-yl2Udh7kD466yupqLh4XJTCDbB1GHvWMVO64Q");
    var token = storage.getItem("token");
    storage.setItem("brandId", "25");
    var brandId = storage.getItem("brandId");

    $(document).ready(function () {
        $.ajax({
            url: "http://192.168.1.20/v1.0/user/brand/query/id?brand_id=" + brandId,
            type: "get",
            success: function (data) {
                console.log(data);
                autoRebateConfigOnOff = data.result.autoRebateConfigOnOff;
                if (autoRebateConfigOnOff == 1) {
                    $(".all-kai").css("background", "#79C48C");
                    $(".all-kai").html("点击关闭");
                } else {
                    $(".all-kai").css("background", "#c2c2c2");
                    $(".all-kai").html("点击开启");
                }
            },
            error: function () {
                alert("获取信息失败!")
            }
        })
    })


    var sonOff;
    //开启贴牌返利功能开关
    function kaiqi(obj) {
        var context = $(obj).text();
        console.log(context);
        if (context == "点击开启") {
            sonOff = 1;
            kaiqiG(obj)
        } else {
            sonOff = 0;
            kaiqiGs(obj)
        }
    }


    function kaiqiG(obj) {
        $.ajax({
            url: "http://192.168.1.20/v1.0/user/brand/update/autorebateonoff/by/brandid",
            type: "post",
            data: {
                brandId: brandId,
                onOff: sonOff
            },
            success: function (data) {
                console.log(data);
                $(obj).css("background", "#79C48C");
                $(obj).html("点击关闭");
            },
            error: function () {
                alert("获取信息失败!")
            }

        })
    }

    function kaiqiGs(obj) {
        $.ajax({
            url: "http://192.168.1.20/v1.0/user/brand/update/autorebateonoff/by/brandid",
            type: "post",
            data: {
                brandId: brandId,
                onOff: sonOff
            },
            success: function (data) {
                console.log(data);
                $(obj).css("background", "#c2c2c2");
                $(obj).html("点击开启");
            },
            error: function () {
                alert("获取信息失败!");
            }

        })
    }

    //确认添加一条返利配置
    function submitM() {

        var rebate = $("#rebate").val();
        var limitAmount = $("#limitAmount").val();
        if (rebate.length == 0 || limitAmount == 0) {
            alert("亲，你还有内容没有填！");
        };
        $.ajax({
            url: "http://192.168.1.20/v1.0/transactionclear/rebateconfig/add/" + token,
            type: "post",
            data: {
                rebate: rebate,
                limitAmount: limitAmount,
                onOff: onOff
            },
            success: function (data) {
                console.log(data);
                $(".all-k").hide();
                vm.getMessage();
            },
            error: function () {
                alert("获取信息失败!")
            }

        })
    }

    var onOff = 1;
    $("#on span").click(function () {
        var val = $(this).attr('id');
        onOff = val;
        if ($(this).hasClass('on') == true) {
            $(this).removeClass('on');
        } else {
            $(this).addClass('on');
            $(this).css("background", '#79C48C');
            $(this).siblings().css('background', '#eeeeee');
            $(this).siblings().removeClass('on');
        }
    });


    //添加弹出框
    $(".all-j").click(function () {
        $(".all-k").css("display", "flex");

    });
    $(".all-d").click(function () {
        $(".all-k").hide();
    });

    var configId;
    var vm = new Vue({
        el: "#app",
        data: {
            values: [],
        },
        methods: {
            getMessage: function () {
                var self = this;
                $.ajax({
                    url: "http://192.168.1.20/v1.0/transactionclear/rebateconfig/query",
                    type: "POST",
                    data: {
                        brandId: brandId
                    },
                    success: function (data) {
                        console.log(data.result);
                        self.values = data.result;
                    },
                    error: function () {
                        alert("获取信息失败!")
                    }
                })
            }
        }
    });

    vm.getMessage();

    function getOnoff(obj) {
        $.ajax({
            url: "http://192.168.1.20/v1.0/transactionclear/rebateconfig/onoff",
            type: "POST",
            data: {
                configId: configId,
                onOff: onOff
            },
            success: function (data) {
                console.log(data);
                $(obj).removeClass('open');
                $(obj).css({
                    "padding-left": "20px",
                    "padding-right": "60px",
                    "background": "#79C48C"
                })
                $('.circle').css('left', '60px');
                $('.circle').css('background', 'white');
                $(obj).children('.onoff').html('开');
            },
            error: function () {
                alert("获取信息失败！")
            }
        })
    }

    function getOff(obj) {
        $.ajax({
            url: "http://192.168.1.20/v1.0/transactionclear/rebateconfig/onoff",
            type: "POST",
            data: {
                configId: configId,
                onOff: onOff
            },
            success: function (data) {
                console.log(data);
                $(obj).addClass('open');
                $('.circle').css('left', '17px');
                $('.circle').css('background', '#79C48C');
                $(obj).css({
                    "padding-left": "60px",
                    "padding-right": "20px",
                    "background": "#393D49",
                    "color": "white"
                });
                $(obj).children('.onoff').html('关');
            },
            error: function () {
                alert("获取信息失败！")
            }
        })
    }

    function changeOnoff(obj) {
        configId = $(obj).children('i').text();
        console.log(configId)
        if ($(obj).hasClass('open')) {
            onOff = 1;
            getOnoff(obj);
        } else {
            onOff = 0;
            getOff(obj);
        }
    }


</script>


</html>